<template>
  <el-container>
    <aside-layout></aside-layout>
    <el-main>
      <div class="incident-registration">
        <h1>事故登记</h1>
        <el-form :model="formData" @submit.prevent="submitForm">
          <el-form-item label="事故类型" required>
            <el-input v-model="formData.incidentType"></el-input>
          </el-form-item>
          <el-form-item label="事故描述" required>
            <el-input type="textarea" v-model="formData.description"></el-input>
          </el-form-item>
          <el-form-item label="事故日期" required>
            <el-date-picker v-model="formData.date" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-button type="primary" @click="submitForm">提交登记</el-button>
        </el-form>
        <h2>事故记录</h2>
        <el-table :data="incidentRecords">
          <el-table-column prop="incidentType" label="事故类型"></el-table-column>
          <el-table-column prop="description" label="事故描述"></el-table-column>
          <el-table-column label="事故日期">
            <template v-slot="scope">
              {{ formatDate(scope.row.DATE) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button @click="editRecord(scope.row)" type="text">编辑</el-button>
              <el-button @click="deleteRecord(scope.row)" type="text" style="color: red;">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import AsideLayout from '@/layout/asideLayout.vue';
import axios from 'axios';

export default {
  name: 'IncidentRegistration',
  components: {
    AsideLayout
  },
  data() {
    return {
      formData: {
        incidentType: '',
        description: '',
        date: ''
      },
      incidentRecords: []
    };
  },
  mounted() {
    this.fetchIncidentRecords();
  },
  methods: {
    fetchIncidentRecords() {
      axios.get('http://localhost:3000/api/incident-records')
        .then(response => {
          this.incidentRecords = response.data;
        })
        .catch(error => {
          console.error('Error fetching incident records:', error);
        });
    },
    submitForm() {
      if (this.formData.id) {
        axios.put(`http://localhost:3000/api/incident-records/${this.formData.id}`, this.formData)
          .then(() => {
            this.fetchIncidentRecords();
            this.formData = { incidentType: '', description: '', date: '' };
            this.$message.success('事故记录更新成功');
          })
          .catch(error => {
            console.error('Error updating incident record:', error);
            this.$message.error('事故记录更新失败');
          });
      } else {
        axios.post('http://localhost:3000/api/incident-records', this.formData)
          .then(() => {
            this.fetchIncidentRecords();
            this.formData = { incidentType: '', description: '', date: '' };
            this.$message.success('事故记录添加成功');
          })
          .catch(error => {
            console.error('Error adding incident record:', error);
            this.$message.error('事故记录添加失败');
          });
      }
    },
    deleteRecord(record) {
      this.$confirm(`确认删除事故记录 ${record.incidentType} 吗？`, '提示', {
        type: 'warning'
      }).then(() => {
        axios.delete(`http://localhost:3000/api/incident-records/${record.id}`)
          .then(() => {
            this.fetchIncidentRecords();
            this.$message.success('事故记录删除成功');
          })
          .catch(error => {
            console.error('Error deleting incident record:', error);
            this.$message.error('事故记录删除失败');
          });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    editRecord(record) {
      this.formData = { ...record }; // 将选中的记录填入表单
    },
    formatDate(dateString) {
      const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
      return new Date(dateString).toLocaleDateString('zh-CN', options);
    }
  }
};
</script>

<style scoped>
.incident-registration {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: 100vh;
  overflow: auto;
}

.el-container {
  height: 100vh;
}

.el-main {
  padding: 0;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>